<template>
	<view id="contentDiv">
		<view class="grid col-3" >
			<view class="h100 padding-1 light " 
				  v-for="(item,index) in dayList" 
				  :class="colors[item.random1]"
				  :key='index'
				  @click="toOneDay(item)">
				<view class="h100 light" 
					  v-if='!memories[item.dt]'
				      :class="colors[item.random1]">
					<view class="padding-sm">
						<view class="flex justify-between">
							<text>{{item.month}}</text>
							<text>{{item.week}}</text>
						</view>
						<view class="">
							<text class="text-bold text-xxl">{{item.day}}</text>
						</view>
						<view class='text-center'>
							<text class='cuIcon-cameraadd text-xxl' style="font-size: 20px;"></text>
						</view>
					</view>
				</view>  
				<view v-if="memories[item.dt]">
					<view class="bg-img h100" :style="'background-image: url('+ memories[item.dt].bgImg +');'">
						<view class="bg-shadeTop1 padding-sm padding-bottom-xl">
							<view class="flex justify-between">
								<text>{{item.month}}</text>
								<!-- <text>{{item.week}}</text> -->
							</view>
							<view class="text-xxl text-bold">
								<text>{{item.day}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dayList:[],
				colors:['bg-red','bg-orange','bg-yellow','bg-olive','bg-green','bg-cyan','bg-blue','bg-purple','bg-mauve','bg-pink','bg-brown','bg-grey','bg-gray','bg-white'],
				memories:{}
				
			}
		},
		methods: {
			//获取日期列表
			getDayList:function(){
				let start = new Date();
				if(this.dayList.length != 0){
				  start = new Date(this.dayList[0].date.getTime() - 24*60*60*1000);
				}
					
				for(var i=0;i<30;i++){
					let temp = new Date(start.getTime() - i*24*60*60*1000);
					let ts = {
						dt:'dt' + this.util.format(temp.getTime(),true).split('-').join('') + 'dt',
						date:temp,
						year:temp.getFullYear(),
						month:this.getShortMonth(temp.getMonth()),
						day:temp.getDate(),
						week:this.getShortWeek(temp.getDay()),
						random1:Math.floor(Math.random()*12)
					}
					this.dayList.unshift(ts);
				}
					
				if(uni.getStorageSync('user')){
					uni.request({
						url:this.host+'/today/getMemoryList',
						method:'POST',
						header:this.util.header(),
						data:{
							userId: uni.getStorageSync('user').id,
							startDate: new Date(this.dayList[0].date.getTime() - 24*60*60*1000*30) ,
							endDate: start,
							rows:30
						},success: (res) =>{
							if(res.data.data.flag == 0){
								res.data.data.beanList.forEach((item) => {
									this.$set(this.memories,'dt'+this.util.format(new Date(item.createTime).getTime(),true).split('-').join('')+'dt',item);
								});
							}
						}
					})
				}
			},
			//获取短月
			getShortMonth:function(month){
				let cn_ts=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
				return cn_ts[month];
			},
			//获取短周
			getShortWeek:function(week){
				let cn_ts = ['周日','周一','周二','周三','周四','周五','周六'];
				return cn_ts[week];
			},
			transTimeToString:function(item){
				let year = item.getFullYear();
				let month = item.getMonth()+1;
				let day = item.getDate();
				return year+'-'+month+'-'+day;
			},
			//点击到某一天
			toOneDay:function(item){
				console.log(item)
				uni.setStorageSync('today',this.transTimeToString(item.date));
				this.util.to_nav_page('/pages/today/today');
			},
			toBottom:function(){
				this.$nextTick(() => {
					let contentDiv = uni.createSelectorQuery().select("#contentDiv");
					contentDiv.boundingClientRect((res) => {
						uni.pageScrollTo({
							duration:500,
							scrollTop:res.height
						})
					}).exec();
				})
			}
			
		},
		onLoad:function(){
			this.getDayList();
			this.toBottom();
	
		},
		onPullDownRefresh:function(){
			this.getDayList();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style>

</style>
